<template>
  <div
    v-if="moduleNameOptions&&activePageForm&&activePageForm.activeModuleIndex!=null&&activePageForm.modules[activePageForm.activeModuleIndex].type"
    class="module-content-container"
  >
    <div class="flexRBC">
      <div class="box-title">
        <!-- {{ moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].label }} -->
      </div>
      <div v-show="type == 'mofangdaohang'||type == 'shangpinzhuanlan'|| type=='pingmianlunbo'||type == 'anniu'||type == 'tupian'" class="type_select">
        <el-select v-model="thirld" size="mini" placeholder="请选择" @change="changeSelect">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="type_select" v-if="['CARDBOON', 'OFTEN'].includes(bizType)">
        <el-button type="primary" size="small"  round @click="contentChange(bizType)">添加内容</el-button>
      </div>
      <div>
        <el-button type="primary" size="small" v-if=" ['pingmianlunbo', 'cengdielunbo'].includes(type)" round @click="contentChange(type)">设置高度</el-button>
        <el-button type="danger" size="small" round @click="del">删除模块</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div v-if="showType == 'MALL'">
      <DumpList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='DUMP'" />
      <MallShelfList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='MALL_SHELF'" />
      <ReservationShelfList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='RESERVATION_SHELF'" />
      <TextList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='TEXT'" />
      <CouponList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='COUPON'" />
      <OpenCard v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='OPEN_CARD'" />
      <Recharge v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='RECHARGE'" />
      <Marketing v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='MARKETING'" />
      <ProductModule
        v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='DIANPU' &&
          activePageForm.modules[activePageForm.activeModuleIndex].type === 'shangpinfenlei'
        "
      />
      <Remarks v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='REMARKS'" />
      <CardBoon v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='CARDBOON'" />
      <Often v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='OFTEN'"  />
      <ScrollAffiche v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='AFFICHE'"  />
      <Checkbox v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='CHECKBOX'"  />
      <RadioWin v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='RADIOWIN'"  />
    </div>
    <div v-else>
      <OrderDumpList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='DUMP'" />
      <OrderMallShelfList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='MALL_SHELF'" />
      <OrderReservationShelfList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='RESERVATION_SHELF'" />
      <OrderTextList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='TEXT'" />
      <OrderCouponList v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='COUPON'" />
      <OrderOpenCard v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='OPEN_CARD'" />
      <OrderRecharge v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='RECHARGE'" />
      <OrderMarketing v-if="activePageForm.modules[activePageForm.activeModuleIndex].biz.type==='MARKETING'" />
    </div>

  </div>
</template>
<script>
import DumpList from './components/DumpList'
import MallShelfList from './components/MallShelfList'
import ReservationShelfList from './components/ReservationShelfList'
import TextList from './components/TextList'
import CouponList from './components/CouponList'
import OpenCard from './components/OpenCard'
import Recharge from './components/Recharge'
import Marketing from './components/Marketing'
import ProductModule from './components/ProductModule'
import Remarks from './components/Remarks.vue'
import CardBoon from './components/CardBoon.vue'
import Often from './components/Often.vue'
import Checkbox from './components/Checkbox.vue'
import RadioWin from './components/RadioWin.vue'

import OrderDumpList from './order-components/DumpList'
import OrderMallShelfList from './order-components/MallShelfList'
import OrderReservationShelfList from './order-components/ReservationShelfList'
import OrderTextList from './order-components/TextList'
import OrderCouponList from './order-components/CouponList'
import OrderOpenCard from './order-components/OpenCard'
import OrderRecharge from './order-components/Recharge'
import OrderMarketing from './order-components/Marketing'
import OrderProductModule from './order-components/ProductModule'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import ScrollAffiche from './components/ScrollAffiche.vue'

import { mapGetters } from 'vuex'

export default {
  components: {
    DumpList,
    MallShelfList,
    TextList,
    CouponList,
    OpenCard,
    Recharge,
    Marketing,
    ProductModule,
    OrderDumpList,
    OrderMallShelfList,
    OrderTextList,
    OrderCouponList,
    OrderOpenCard,
    OrderRecharge,
    OrderMarketing,
    OrderProductModule,
    Remarks,
    ReservationShelfList,
    OrderReservationShelfList,
    Remarks,
    CardBoon,
    Often,
    ScrollAffiche,
    Checkbox,
    RadioWin
  },
  data() {
    return {
      // 配置
      moduleNameOptions: null,
      // 状态
      // 数据
      classifyCode: 'DEFAULT',
      options: [{
        value: 'MALL',
        label: '商城小程序'
      }, {
        value: 'ORDER',
        label: '扫码点单'
      }
      ],
      businessType: 'MALL',
      thirld: '',
      showType: '',
      bizType: ''
    }
  },

  watch: {
    'activePageForm.activeModuleIndex'() {
      this.setbusinessType()
    }
  },

  computed: {
    ...mapGetters(['activePageForm', 'businessTypes'])
  },
  created() {
  },
  mounted() {
    this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName
    this.setbusinessType()
  },
  methods: {
    contentChange(type) {
      console.log(type)
      switch(type) {
        case 'CARDBOON':
          this.$bus.$emit('__CARDBOON');
        break;
        case 'OFTEN':
          this.$bus.$emit('__OFTEN');
        break;
        case 'cengdielunbo':
          this.$bus.$emit('__SMALL')
        break;
        case 'pingmianlunbo':
          this.$bus.$emit('__SMALL')
        break;
      }

    },
		/**
		 * 数据组
		 */
		/**
		 * 按钮组
		 */
		del() {
			this.activePageForm.modules.splice(this.activePageForm.activeModuleIndex, 1);
			if (this.activePageForm.modules.length == 0) {
				// 没有了清空
				this.activePageForm.activeModuleIndex = null;
			} else if (this.activePageForm.activeModuleIndex > this.activePageForm.modules.length - 1) {
				// 后面没有减一
				this.activePageForm.activeModuleIndex--;
			}

      const selectedTypes = []
      this.activePageForm.modules.forEach(item => {
        selectedTypes.push(item.biz.type)
      })

			this.$store.dispatch('setSelectedTypes', selectedTypes);
		},
		changeSelect(e) {
			this.$confirm('当前已配置了内容，切换数据来源并执行保存后会清空已配置的内容，是否确定切换数据来源?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			})
				.then(() => {
					this.businessType = this.showType = this.thirld;
					this.steVal();
				})
				.catch(() => {
					this.showType = this.thirld = this.businessType;
				});
		},
		steVal() {
			let { businessType } = this;
			this.activePageForm.modules[this.activePageForm.activeModuleIndex].businessType = businessType;
			this.$store.dispatch('setActiveBuiness', businessType);
			this.activePageForm.modules[this.activePageForm.activeModuleIndex].modules = [];
		},
		setbusinessType() {
			let { businessType, type, biz } = this.activePageForm.modules[this.activePageForm.activeModuleIndex];
			this.businessType = businessType == '' || businessType == undefined ? 'MALL' : businessType;
			this.type = type;
      this.bizType = biz?.type
			this.showType = this.thirld = this.businessType;
		}
		/**
		 * 状态组
		 */
		/**
		 * 方法组
		 */
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.module-content-container {
  min-width: 550px;
  overflow: auto;
  padding: 20px;
  height: 100%;
  background-color: #fff;
}

.box-title {
  height: 30px;
  line-height: 30px;
  color: #303133;
  font-weight: bold;
}
.type_select{
  margin: 0 auto 0 10px;
}
</style>
